﻿/**
 * Created by wzj on 2017/3/20.
 */

/**
 * 纵向菜单
 *
 *
 *
 *
 *
 *
 *
 *
 */


/*--------------------------------------------------------------------------------------------*/

var DataMenu = {
	caption: " 会员中心",
	menu: [
			{
				name: "我的报盘", url: "", children: [
					{name: "我的报盘模板", url: ""},
					{name: " 我的报盘记录", url: ""}
				]
			},
			{
				name: "我的订单", url: "", children: [
					{name: "我的采购", url: ""},
					{name: " 我的销售", url: ""}
				]
			},
			{
				name: "我的招标", url: "", children: [
					{name: "我的标书模板", url: ""},
					{name: " 我的招标记录", url: ""}
				]
			},
			{
				name: "我的投标", url: "", children: [
					{name: "我的投标标的", url: ""},
					{name: " 我的投标记录", url: ""}
				]
			},
			{
				name: "我的意向", url: "", children: [
					{name: "我发布的意向", url: ""}
				]
			},
			{
				name: "我的账户", url: "", children: [
					{name: "账户信息", url: ""},
					{name: "修改密码", url: ""},
					{name: "我的子账户", url: ""}
				]
			},
			{
				name: "我的白名单", url: "", children: [
					{name: "我的白名单", url: ""}
				]
			}



	]
}
/*--------------------------------------------------------------------------------------------*/
//
class VerticalMenu extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.state = {
			datas:DataMenu,
			focusItem:{
				name:"",
				url:""
			}
		}



	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/

	ajaxRequestData() {
		//设置数据填充
		this.setState({
			datas:DataMenu
		});
		//设置当前选中项
		this.setState({
			focusItem:{name:this.props.focusItem}
		});
	}
	/*******************************************************************/
	//子菜单点击事件
	handleItemClick = (event) =>{
		//当前选中项
		var focus = {
			name:event.currentTarget.innerHTML,
			url:$(event.currentTarget).data("url")
		}
		this.setState({
			focusItem:focus
		});
	}
	/*******************************************************************/
	render() {

			//配置
		var items = null;
		items = this.state.datas.menu.map((parent) =>
			<div className="menu-items">
				<div className="parent"><div className="item-name">{parent.name}</div></div>
				<div className="child">
					{parent.children.map((child) =>
						<div className={child.name==this.state.focusItem.name?"item-name selected":"item-name"} onClick={this.handleItemClick} data-url={child.url}>{child.name}</div>
					)}
				</div>
			</div>
		);

		return (
			<div className="vertical-menu">
				<div className="menu-caption">{this.state.datas.caption}</div>
				<div className="menu-wrap">
					{items}
				</div>
			</div>
		);
	}
}

